<template>
	<view>
		<!-- 新闻类型tab -->
		<lib-type :tabIndex.sync="tabIndex" :tabArr="tabArr" @change="tabChange"></lib-type>
		<view class="swiperWrap">
			<swiper class="swiper" :current="tabIndex" :skip-hidden-item-layout="true" duration="300" @change="swiperChange" style="height:100%;">
				<swiper-item v-for="(item,index) in ansQueList" :key="index"> 
					<scroll-view scroll-y style="height: 100%;" upper-threshold="50" @scrolltolower="loadMore(index)">
						<!--  @replayMyAns="replayMyAns"  -->
						<template v-if="item.firstload">
							<template v-if="item.isHasDataFlag">
								<block v-for="(itemInner,indexInner) in item.list" :key="indexInner">
									<list-que :tabIndex="tabIndex" :itemInner="itemInner" :indexInner="indexInner" @goQueInfoDet="goQueInfoDet"></list-que>
								</block>
								<loading-view :loading="item.loading"></loading-view>
							</template>
							<template v-else-if="item.isHasDataFlag == false">
								<no-data></no-data>
							</template>
						</template>
						<template v-else>
							<view class="loadingTxt"><loading :cirSize="26"></loading></view>
						</template>
						
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import LibType from './components/LibType'
	import ListQue from './components/ListQue'
	import jyfParser from "@/components/jyf-parser/jyf-parser";
	import { getMyQueAnsList } from '@/api/ansQue/index'
	export default {
		components:{
			LibType,
			ListQue,
			jyfParser
		},
		data(){
			return{
				tabArr:[
					{typeName:'我的提问',typeId:'ask'},
					{typeName:'我的回答',typeId:'ack'}
				],
				tabIndex:0,
				typeId:'ask',//默认待解答
				ansQueList:[]
			}
		},
		onLoad(options){
			this.getList();
		},
		methods:{
			getList(){
				let arr = [];
				for (let i = 0; i < this.tabArr.length; i++) {
					arr.push({
						list:[],
						page:1,
						isHasDataFlag:null,
						loading:false,
						firstload:false,
					});
				}
				this.ansQueList = arr; 
				this.loadMyQueAnsList();
			},
			loadMyQueAnsList(){
				let currentIndex = this.tabIndex;
				this.ansQueList[currentIndex].loading = true;
				var field = { opt:this.typeId,page:this.ansQueList[currentIndex].page,limit:this.limit };
				getMyQueAnsList(field).then(res=>{
					let arr = [];
					let list = res.data.datas;
					for (let i = 0; i < list.length; i++) {
						list[i].resType = this.typeId;
						arr.push(list[i]);
					}
					this.ansQueList[currentIndex].loading = false;
					this.ansQueList[currentIndex].firstload = true;
					this.ansQueList[currentIndex].isHasDataFlag = true;
					this.ansQueList[currentIndex].list = this.ansQueList[currentIndex].page > 1 ? this.ansQueList[currentIndex].list.concat(arr) : arr;
				}).catch(err=>{
					//console.log(err)
					this.ansQueList[currentIndex].firstload = true;
					this.ansQueList[currentIndex].isHasDataFlag = false;
					this.ansQueList[currentIndex].loading = false;
				});
			},
			loadMore(index){
				this.ansQueList[index].page++;
				this.loadMyQueAnsList();
			},
			//跳转回复详情
			goQueInfoDet(id,innerIndex){
				uni.navigateTo({
					url:'../ansQueDet/ansQueDet?queId=' + id + '&tabIndex=' + this.tabIndex + '&currIndex=' + innerIndex
				})
			},
			tabChange(index){
				this.tabIndex = index;
				index == 0 ? this.typeId = 'ask' : this.typeId = 'ack';
				if(!this.ansQueList[index].firstload){
					this.loadMyQueAnsList();
				}
			},
			swiperChange(e) {
				let { current } = e.target;
				this.tabIndex = current;
				current == 0 ? this.typeId = 'ask' : this.typeId = 'ack';
				if(!this.ansQueList[current].firstload){
					this.loadMyQueAnsList();
				} 
			}
		}
	}
</script>

<style lang='scss'>
	page{
		background: $pss-bg-primary;
	}
	.swiperWrap{
		position: absolute;
		left: 0;
		right: 0;
		top: 110rpx;
		bottom: 0;
	}
</style>